@import '~styles/settings.scss';

.c-dashboards-header {
  position: relative;
  background-color: $slate-light;
  padding: rem(50px) 0;
  width: 100%;
  min-height: rem(250px);

  @media screen and(min-width: $screen-l) {
    padding: rem(60px) rem(30px) rem(50px) 0;
    min-height: rem(350px);
  }

  .meta-controls {
    position: absolute;
    right: rem(20px);
    top: rem(20px);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .share-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    .overflow-menu {
      color: $white;
    }

    > * {
      margin-left: rem(5px);

      &:first-child {
        margin-right: rem(8px);
      }

      svg {
        margin-top: rem(-5px);
        width: rem(15px);
        height: rem(15px);

        &:hover {
          fill: darken($white, 20%);
        }
      }
    }

    .area-share {
      svg {
        fill: $white;

        &:hover {
          fill: darken($white, 20%);
        }
      }
    }
  }

  .private-area-notice {
    padding: 0;
    margin: 0 8px 0 0;
    color: $grey;

    .button-wrapper {
      display: flex;
      align-items: center;
      font-size: 12px;
      text-transform: capitalize;
      gap: 6px;
    }
  }

  .loader {
    z-index: 10;
    width: 100%;
    right: 0;
    left: auto;

    @media screen and (min-width: $screen-xl) {
      width: calc((#{$max-width} * 0.7) - #{$desktop-gutter});
    }
  }

  .select-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: rem(20px);

    &:last-child {
      margin-bottom: 0;
    }

    .breadcrumb-link {
      width: fit-content;
      margin-bottom: rem(30px);

      button {
        display: flex;
        align-items: center;
        color: $green-gfw;
        font-size: rem(12px);
        font-weight: 400;
        cursor: pointer;

        .breadcrumb-icon {
          fill: $green-gfw;
          transform: rotate(90deg);
          margin-right: rem(5px);
          width: rem(12px);
          height: rem(12px);
        }

        &:hover {
          color: darken($green-gfw, 10%);

          .breadcrumb-icon {
            fill: darken($green-gfw, 10%);
          }
        }
      }
    }

    h1 {
      color: $white;
      font-weight: 300;
    }

    h3 {
      font-size: 42px;
      font-weight: 300;
      color: $white;
      text-transform: capitalize;

      &.global {
        margin-left: 30px;
      }
    }

    > div {
      margin-bottom: rem(5px);
    }
  }

  .metadata {
    margin-left: rem(30px);
    display: flex;
    flex-direction: column;

    @media screen and (min-width: $screen-m) {
      flex-direction: row;
    }

    .tags,
    .subscribed {
      margin-right: rem(20px);
      margin-bottom: rem(10px);
      display: flex;
      align-items: center;

      p {
        font-size: rem(12px);
        color: $grey;
        line-height: rem(16px);
        padding: rem(2.5px) 0;
        max-width: rem(250px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      svg {
        margin-right: rem(4px);
      }
    }
  }

  .sentence {
    color: rgba($white, 0.7);
    font-size: rem(18px);
    font-weight: 400;
    margin-top: rem(25px);
    margin-bottom: rem(20px);
    min-height: rem(90px);

    b {
      color: $white;
    }
  }

  .disclaimer {
    color: rgba($white, 0.8);
    font-size: rem(14px);
    font-weight: 400;
    font-style: italic;
    margin-bottom: rem(10px);
  }

  .forest-atlas-btn {
    margin-bottom: rem(20px);
    max-width: rem(200px);
  }
}
